<template>
  <div>
    <div class="login">
      <form class="login-form">
        <h1>登录</h1>
        <input type="text" placeholder="账号" v-model="user.useracc" />
        <input type="password" placeholder="密码" v-model="user.userpwd" />
        <button type="button" @click="userLogin">登录</button>
        <button type="button" @click="toReg">注册</button>
        <img :src="code" @click="getcode" />
        <el-input v-model="checkCode" placeholder="请输入验证码"></el-input>
      </form>
    </div>
    <el-dialog title="注册" :visible.sync="dialogaddVisible">
      <el-form :model="regUser">
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="regUser.useracc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input
            v-model="regUser.userpwd"
            autocomplete="off"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input
            v-model="regUser.check"
            type="password"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button type="primary" @click="userReg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: "",
      result: "",
      checkCode: "",
      user: {
        useracc: "",
        userpwd: "",
      },
      dialogaddVisible: false,
      regUser: {
        useracc: "",
        userpwd: "",
        check: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    userLogin() {
      if (this.checkCode == "") {
        this.$message.error("验证码不能为空~");
        return;
      }
      if (this.checkCode !== this.result) {
        this.$message.error("验证码错误~");
        this.getcode();
        return;
      }
      this.$axios
        .get("/api/user-service/user/userLogin", { params: this.user })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            console.log(resp.data.data);
            sessionStorage.setItem("userid", resp.data.data);
            this.$router.push("/main");
          } else {
            this.$message.error(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toReg() {
      this.$router.push("/reg");
    },
    userReg() {
      if (
        this.regUser.useracc == "" ||
        this.regUser.userpwd == "" ||
        this.regUser.check == ""
      ) {
        this.$message.error("必填项不能为空哦~");
        return;
      }
      if (this.regUser.userpwd !== this.regUser.check) {
        this.$message.error("两次输入的密码一致，请确认输入~");
        return;
      }

      // 验证成功后 请求注册
      this.$axios
        .get("/api/user-service/user/reg", { params: this.regUser })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.$message.success("注册成功,返回登录页");
            this.dialogaddVisible = false;
          } else {
            this.$message.error(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getcode() {
      this.$axios
        .get("/api/user-service/user/createCode", {
          params: { d: new Date() * 1 },
        })
        .then((resp) => {
          this.code = resp.data.data.img;
          this.result = resp.data.data.key;
        });
    },
  },
  created() {
    this.getcode();
  },
};
</script>

<style>
.body {
  background-color: #f3f3f3;
  text-align: center;
  font-family: sans-serif;
}
.login-form {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 20px;
  width: 400px;
  margin: 100px auto;
}
.login-form h1 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.login-form button {
  background-color: #4caf50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.login-form button:hover {
  opacity: 0.8;
}
</style>